import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Divider, Table } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './Profile.less';

const { Description } = DescriptionList;

const progressColumns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '店铺ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '佣金比例',
    dataIndex: 'commissionRatio',
    key: 'commissionRatio',
  },
];
const newOrder = [
  {
    title: '商品名称',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '商品数量',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '收货姓名',
    dataIndex: 'receiverName',
    key: 'receiverName',
  },
  {
    title: '收货地址',
    dataIndex: 'receiverAddress',
    key: 'receiverAddress',
  },
  {
    title: '收货电话',
    dataIndex: 'receiverPhone',
    key: 'receiverPhone',
  },
  {
    title: '店铺ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '支付方式',
    dataIndex: 'payment',
    key: 'payment',
  },
  {
    title: '折扣',
    dataIndex: 'discount',
    key: 'discount',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
  },
];
@connect(({ profile, loading, facilitatorDivided }) => ({
  profile,
  facilitatorDivided,
  loading: loading.models.list,
}))
class Profile extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'profile/fetch',
    });
  }

  render() {
    const {
      profile: { facilitatorCommissionRatio, allData, stores, allNewOrder, loading },
    } = this.props;
    return (
      <PageHeaderWrapper title="服务商明细">
        <Card bordered={false}>
          <DescriptionList size="large" title="店铺收入" style={{ marginBottom: 32 }}>
            <Description term="所有店铺收入">{allData ? allData.allstorePrice : ''}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="服务商分成" style={{ marginBottom: 32 }}>
            <Description term="服务商分成比例">
              {facilitatorCommissionRatio ? facilitatorCommissionRatio.value * 100 : 0}%
            </Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="团队人数" style={{ marginBottom: 32 }}>
            <Description term="团队人数">{allData ? allData.teamUser : ''}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <div className={styles.title}>店铺详情</div>
          <Table
            style={{ marginBottom: 16 }}
            pagination={false}
            loading={loading}
            dataSource={stores}
            columns={progressColumns}
          />
          <div className={styles.title}>最新订单</div>
          <Table
            style={{ marginBottom: 16 }}
            pagination={false}
            loading={loading}
            dataSource={allNewOrder}
            columns={newOrder}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Profile;
